<template>
  <view class="p-specifications">
    <view :class="['title', {bold}]">{{ title }}</view>
    <view class="content">
      <view class="selected">
        {{ currentSkuString }}
      </view>
      <view class="total">
        <view v-if="skuImgList[0]" class="sku-img-list">
          <view class="sku-img" v-for="(item,index) in skuImgList" :key="index">
            <x-image :src="formatOss(item)" />
          </view>
        </view>
        <view class="total-num">共{{totalSkus}}款可选</view>
      </view>
    </view>
    <view class="icon">
      <x-icon name="icon-017" size="24" color="#999999" />
    </view>
  </view>
</template>

<script>
import XIcon from '@/components/x-icon';
import XImage from '@/components/x-image';
import { mapState } from 'vuex';

export default {
  name: 'PMiddleSku',
  components: {
    XIcon,
    XImage
  },
  props: {
    selectedSku: {
      type: String,
      default: ''
    },
    detail: {
      type: Object,
      default: () => ({})
    },
    productId: {
      type: String,
      default: ''
    },
    bold: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '规格'
    }
  },
  data() {
    return {

    };
  },
  computed: {
    ...mapState({
      // 已选套餐规格
      userSelectSku: state => state['product'].userSelectSku
    }),
    totalSkus() {
      let total = 0;
      if (this.detail?.skuMode === 2) {
        this.detail.productSkuInfo.forEach(sku => {
          total += sku.value.length;
        });
      } else if (this.detail?.skuMode === 3) {
        this.detail.comboSkuInfo.forEach(combo => {
          combo.skuInfo.forEach(sku => {
            total += sku.value.length;
          });
        });
      }
      return total;
    },

    currentSku() {
      let skuList = null;
      let productSkuList = this.detail?.productSkuList;
      let productSkuInfo = this.detail?.productSkuInfo;
      if (this.userSelectSku && this.userSelectSku.productId === this.productId) {
        productSkuList = this.userSelectSku.productSkuList;
        productSkuInfo = this.userSelectSku.productSkuInfo;
      }
      if (productSkuList) {
        skuList = productSkuList.find(item => item.attr.every((spec) => spec.value === productSkuInfo.find((s) => s.name === spec.name)?.selected));
      }

      return skuList;
    },

    currentSkuString() {
      if (this.currentSku) {
        return `已选：${this.currentSku.attr.map(item => item.value).join('/')}`;
      }
      return '请选择规格';
    },

    skuImgList() {
      let skuImgList = [];
      const specPicSku = this.detail?.productSkuInfo.find(sku => sku.hasSpecPic);

      if (specPicSku) {
        skuImgList = specPicSku.valueInfo.map(item => item.specPic)?.slice(0, 5) || [];
      }

      return skuImgList;
    }
  },
  methods: {
    // 格式化图片
    formatOss(url) {
      return this.$tools.formatOss(url, 50, 20);
    }
  }
};
</script>

<style lang="scss" scoped>
.p-specifications{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  font-size: 30px;
  .title{
    color: #888888;
    flex: none;
    &.bold{
      font-weight: 500;
    }
  }
  .content{
    padding: 0 20px;
    flex: 1;

    .selected{
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .total{
      display: flex;
      align-items: center;
      margin-top: 8px;
      .sku-img-list{
        display: flex;
        align-items: center;
        .sku-img{
          width: 60px;
          height: 60px;
          margin-right: 10px;
          border-radius: 8px;
          overflow: hidden;
        }
      }
      .total-num{
        padding: 10px;
        color: #6E6E6E;
        font-size: 28px;
        background: #EEEEEE;
        border-radius: 8px;
      }
    }
  }
  .icon{
    width: 24px;
    height: 24px;
  }
}
</style>
